<template>
  <div class="review">
    <page-header title="精彩回顾"></page-header>
    <search @search="_search"></search>
    <scroll class="content" :data="list" ref="scroll" :class="{'loading': loading}"
      :pullup="true" :pulldown="true" @scrollToEnd="_more" @pullingDown="_refash">
      <ul class="list">
        <li v-for="(item, index) in list" :key="index" class="item" @click="_turn(item)">
          <div class="pic">
            <img :src="item.img" alt="">
            <ul class="fit">
              <li>年龄：{{item.age}}</li>
              <li>日期：{{item.date}}</li>
              <li>时长：{{item.time}}</li>
            </ul>
          </div>
          <div class="info">
            <p class="title">{{item.title}}</p>
            <p class="des">{{item.des}}</p>
          </div>
        </li>
        <p class="nomore" v-if="nomore">没有更多</p>
      </ul>
    </scroll>
  </div>
</template>

<script type="text/ecmascript-6">
import PageHeader from 'components/page-header'
import Search from 'components/search'
import Scroll from 'components/scroll/scroll'
import * as exampleApi from 'api/example'
import { commonOption } from 'api/config'
export default {
  components: {
    PageHeader,
    Search,
    Scroll
  },
  data () {
    return {
      list: [],
      page: 1,
      pageSize: 2,
      type: '',
      text: '',
      loading: false,
      nomore: false
    }
  },
  created() {
    this._initData()
  },
  methods: {
    _search(val, type) {
      this.text = val
      this.type = type
      this.page = 1
      this.list = []
      this._initData()
    },
    _more() {
      if (this.nomore) {
        return
      }
      this.page ++
      this._initData()
    },
    _refash() {
      this.page = 1
      this.loading = true
      this._initData()
    },
    _initData() {
      exampleApi.modePost('/weixin/activitiyList', {
        page: this.page,
        size: this.pageSize,
        typeid: this.type.id ? this.type.id : '',
        name: this.text ? this.text : '',
        status: 'END',
        orders: 'applyendtime desc'
      }).then(res => {
        if (res.data.data) {
          let activitiyList = res.data.data.list
          if (activitiyList.length > 0) {
            this.toFor(0, activitiyList, [], res.data.data.total)
          }
        }
      })
    },
    toFor (index, activitiyList, responseList, total) {
      exampleApi.modePost('/weixin/activitiyPrice', {
        activitiyid: activitiyList[index].id
      }).then(priceRes => {
        let priceList = priceRes.data.data
        responseList.push({
          id: activitiyList[index].id,
          title: activitiyList[index].name,
          des: activitiyList[index].intro,
          age: activitiyList[index].age,
          date: activitiyList[index].days,
          time: activitiyList[index].time,
          address: activitiyList[index].address,
          peopleNum: priceList[0] ? priceList[0].name : '',
          price: priceList[0] ? priceList[0].money : 0,
          img: commonOption.host + '/' + (activitiyList[index].cover.split('@')[0])
        })
        if (index + 1 === activitiyList.length) {
          if (this.page === 1) {
            // 初始 或者刷新
            this.list = responseList
            this.nomore = false
          } else {
            responseList.forEach(item => {
              this.list.push(item)
            })
          }
          if (this.loading) {
            this.$refs.scroll && this.$refs.scroll.scrollFinishPullDown()
            this.loading = false
          }
          // nomore
          if (this.page * this.pageSize >= total) {
            this.nomore = true
          }
        } else {
          this.toFor(index + 1, activitiyList, responseList, total)
        }
      })
    },
    _turn(item) {
      this.$router.push({
				path: `/personal/review/detail${item.id}`
			})
    }
  }
}
// "better-scroll": "^0.1.15"
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .review{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #e6e6e6;
    .content{
      position: relative;
      height:calc(~"100% - 172px");
      overflow: hidden;
      &::after {
        position: absolute;
        display: none;
        content: '';
        top: 10px;
        left: 0;
        width: 100%;
        height: 40px;
        text-align: center;
        background: url('../../assets/image/loading.gif') no-repeat center / 40px auto;
      }
      .list{
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        width: 100%;
      }
      .item{
        width: 100%;
        height: 512px;
        background-color: #ffffff;
        margin-top: 20px;
        .pic{
          position: relative;
          width: 100%;
          height: 340px;
          overflow: hidden;
          img{
            width: 100%;
            height: auto;
          }
          .fit{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 49px;
            background-color: rgba(0, 0, 0, 0.4);
            display: flex;
            padding-left: 24px;
            overflow: hidden;
            align-items: center;
            li{
              margin-right: 40px;
              font-size: 20px;
	            color: #ffffff;
            }
          }
        }
        .info{
          height: 172px;
          padding: 26px;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          overflow: hidden;
          .title{
            font-size: 32px;
            color: #333333;
            font-weight: bold;
          }
          .des{
            font-size: 22px;
            line-height: 34px;
	          color: #999999;
          }
        }
      }
      .nomore{
        font-size: 22px;
        color: #999999;
        text-align: center;
        padding: 20px 0;
      }
    }
    .content.loading{
      &::after {
        display: block;
      }
    }
  }
</style>
